<template>
    <div :id="pieChartId"></div>
</template>

<script>
    import echarts from "echarts"
    export default {
        name: "PieChart",
        data () {
            return {
                option: {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a}: {b}<br/>{c}小时({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 150,
                        data: ['学生', '教师', '游客'],
                        selected: {'学生': true, '教师': true, '游客': true}
                    },
                    series: [
                        {
                            name: '类型',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: [{'name': '学生', 'value': 0}, {'name': '教师', 'value': 0}, {'name': '游客', 'value': 0}],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        },
        computed: {
            pieChartId () {
                return `pieChart${this._uid}`
            }
        },
        mounted() {
            this.pieChart = echarts.init(document.getElementById(`${this.pieChartId}`), null, {renderer: 'svg'})
        }
    }
</script>

<style scoped>

</style>
